<template>
  <div :style="{height:`${listHeight}px`}" ref="topSongLists" class="topSongLists">
    <ul >
      <li
        v-for="(item, index) in songsArr"
        :key="index"
        @click="getDetialLists(index)"
        class="topSongListsWrapperItem"
      >
        <p>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-duolaameng-" />
          </svg>
          {{item}}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songsArr: [
        "云音乐新歌榜",
        "云音乐热歌榜",
        " 网易原创歌曲榜",
        "云音乐飙升榜",
        "云音乐电音榜",
        " UK排行榜周榜",
        "美国Billboard周榜",
        "KTV嗨榜",
        " iTunes榜",
        "Hit FM Top榜",
        "日本Oricon周榜",
        "韩国Melon排行榜周榜",
        "韩国Mnet排行榜周榜",
        "韩国Melon原声周榜",
        "中国TOP排行榜(港台榜)",
        "中国TOP排行榜(内地榜)",
        "香港电台中文歌曲龙虎榜",
        "华语金曲榜",
        "中国嘻哈榜",
        "法国 NRJ EuroHot 30周榜",
        "台湾Hito排行榜",
        " Beatport全球电子舞曲榜",
        "云音乐ACG音乐榜",
        "云音乐嘻哈榜"
      ],
      listHeight:0
    };
  },
  methods: {
    getDetialLists(index) {
      this.$store.dispatch("getTopSongLists", index);
      this.$router.push({ path: "/topSongsLists" });
    }
  },
  mounted(){
this.listHeight=document.documentElement.clientHeight-this.$refs.topSongLists.getBoundingClientRect().top
  }
};
</script>

<style scoped lang="stylus">
.topSongLists
    overflow scroll
.topSongListsWrapperItem
        display block
        height 50px
        text-align left
        text-indent 10px
        line-height 50px
        border-bottom 1px solid #ccc
        padding 5px 10px
        font-size 20px
        p
            background rgba(233,233,216,0.6)
            svg
                    width: 50px;
                    height 50px
                    vertical-align: -20px;
                    fill: currentColor;
                    overflow: hidden;
                    margin-right 20px
</style>